<template>
  <div class="emission-head-cards g-flex-between-start">
    <SelectedModelBox
      position="LEFT"
      :modelDetail="props.leftModel"
      v-if="props.leftModel"
      @change="changeModel('LEFT')"
    ></SelectedModelBox>
    <EmptyModelBox v-else @change="changeModel('LEFT')"></EmptyModelBox>
    <img class="vs-img" src="@/assets/images/icon_vs.png" />
    <SelectedModelBox
      position="RIGHT"
      :modelDetail="props.rightModel"
      v-if="props.rightModel"
      @change="changeModel('RIGHT')"
    ></SelectedModelBox>
    <EmptyModelBox v-else @change="changeModel('RIGHT')"></EmptyModelBox>
  </div>
</template>
<script lang="ts" setup name="CardHead">
import { withDefaults, defineProps, defineEmits } from 'vue';
import SelectedModelBox from './components/SelectedModelBox/index.vue';
import EmptyModelBox from './components/EmptyModelBox/index.vue';
import type { ModelPositionType } from '../../types';
import type { GetVisibleModelDetailResult } from '@/apis/pcf/pcfForm/model/pcfFormModel';
interface CardHeadProps {
  // 左侧模型
  leftModel?: GetVisibleModelDetailResult;
  // 右侧模型
  rightModel?: GetVisibleModelDetailResult;
}

const props = withDefaults(defineProps<CardHeadProps>(), {});
const emits = defineEmits(['select']);

function changeModel(position: ModelPositionType) {
  emits('select', position);
}
</script>

<style lang="scss" scoped>
.emission-head-cards {
  position: relative;
  .vs-img {
    width: 52px;
    height: 128px;
    position: absolute;
    left: 50%;
    margin-left: -26px;
    z-index: 1;
  }
}
</style>
